import React from 'react'
import { Carousel, WingBlank, Flex } from 'antd-mobile'
import axios from 'axios'
import Nav1 from "../../assets/images/nav-1.png"
import Nav2 from "../../assets/images/nav-2.png"
import Nav3 from "../../assets/images/nav-3.png"
import Nav4 from "../../assets/images/nav-4.png"
import './index.scss'

export default class Index extends React.Component {
  state = {
    imgList: [],
    groupList: [],
    newsList: [],
    localCity: '太原'
  }

  componentDidMount() {
    this.getLocalCity()
    this.getImgList()
    this.getGroupList()
    this.getNewsList()
  }

  getLocalCity = () => {
    const myCity = new window.BMap.LocalCity()
    myCity.get(async (result) => {
      const cityName = result.name

      const {data} = await axios.get(`http://127.0.0.1:8080/area/info?name=${cityName}`)

      this.setState({
        localCity: data.body.label
      })
    })
  }

  getImgList = async () => {
    const {data} = await axios.get(`http://127.0.0.1:8080/home/swiper`)

    if(data.status !== 200) {
      alert(data.description)
    }

    this.setState({
      imgList: data.body
    })
  }

  getGroupList = async () => {
    const {data} = await axios.get(`http://127.0.0.1:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0`)

    if(data.status !== 200) {
      alert(data.description)
    }

    this.setState({
      groupList: data.body
    })
  }

  getNewsList = async () => {
    const {data} = await axios.get(`http://127.0.0.1:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0`)

    if(data.status !== 200) {
      alert(data.description)
    }

    this.setState({
      newsList: data.body
    })
  }

  renderImgList = () => {
    if(this.state.imgList.length === 0) {
      return <div style={ {height: 212, background:'#ccc' } }></div>
    }

    return <div className="carousel-search-box">
      <Carousel
        autoplay={true}
        infinite
      >
        {this.state.imgList.map(val => (
          <a
            key={val.id}
            href="http://www.itcast.com"
            style={{ display: 'inline-block', width: '100%', height: 212 }}
          >
            <img
              src={`http://127.0.0.1:8080${val.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top', height: 212 }}
            />
          </a>
        ))}
      </Carousel>
      <Flex className='search-box'>
        {/* 左侧白色区域 */}
        <Flex className="search">
            {/* 位置 */}
            <div className="location" >
              <span className="name">{this.state.localCity}</span>
              <i className="iconfont icon-arrow" />
            </div>

            {/* 搜索表单 */}
            <div className="form">
              <i className="iconfont icon-seach" />
              <span className="text">请输入小区或地址</span>
            </div>
        </Flex>
        {/* 右侧地图图标 */}
        <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')}/>
      </Flex>
    </div>
  }

  renderNav = () => {
    return (
      <div className="nav-box">
        <div className="nav-box-item" onClick={() => this.props.history.push('/home/list')}>
          <img src={Nav1} alt=""/>
          <div className="nav-box-item-title">整租</div>
        </div>
        <div className="nav-box-item">
          <img src={Nav2} alt=""/>
          <div className="nav-box-item-title">整租</div>
        </div>
        <div className="nav-box-item">
          <img src={Nav3} alt=""/>
          <div className="nav-box-item-title">整租</div>
        </div>
        <div className="nav-box-item">
          <img src={Nav4} alt=""/>
          <div className="nav-box-item-title">整租</div>
        </div>
      </div>
    )
  }

  renderGroupList = () => {
    return (
      <div className="group-list">
        <div className="group-list-title">
          <h3>租房小组</h3>
          <a href="/#">更多</a>
        </div>

        <div className="group-list-box">
          {this.state.groupList.map(item => {
            return (
              <div className="group-list-item" key={item.id}>
                <img src={`http://127.0.0.1:8080${item.imgSrc}`} alt=""/>
                <div className="group-list-item-content">
                  <div>{item.title}</div>
                  <div>{item.desc}</div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

  renderNewsList = () => {
    return (
      <div className="news">
        <h3 className="group-title">最新资讯</h3>
        <WingBlank size="md">{this.state.newsList.map(item => {
          return (
            <div className="news-item" key={item.id}>
                <div className="imgwrap">
                    <img
                        className="img"
                        src={`http://localhost:8080${item.imgSrc}`}
                        alt=""
                    />
                </div>
                <Flex className="content" direction="column" justify="between">
                    <h3 className="title">{item.title}</h3>
                    <Flex className="info" justify="between">
                        <span>{item.from}</span>
                        <span>{item.date}</span>
                    </Flex>
                </Flex>
            </div>
          )})}
        </WingBlank>
      </div>
    )
  }

  render() {
    return (
      <div className="index-box">
        {this.renderImgList()}

        {this.renderNav()}

        {this.renderGroupList()}

        {this.renderNewsList()}
      </div>
    )
  }
}
